<template>
  <div id="Car">
    <ShoppingCartop />

    <section class="main">
      <!-- 这里是购物车 -->
      <van-card :price="price.xprice" :title="price.xtitle" :thumb="price.ximg" />
    </section>
    <button @click="fn()"></button>

    <ShoppingCarbottom />
  </div>
</template>

<script>
import ShoppingCartop from "@/components/ShoppingCartop.vue";
import ShoppingCarbottom from "@/components/ShoppingCarbottom.vue";
export default {
  data() {
    return {
      price: {},
    };
  },
  components: {
    ShoppingCartop,
    ShoppingCarbottom,
  },
  mounted:{
    fn(){
      this.price = this.$store.state.price;
    }
  },

  created() {
    console.log("11111");
    this.price = this.$store.state.price;
    console.log("this.$store.state.price", this.$store.state.price);
    //  this.title =this.$store.state.title
    //  this.thumb =this.$store.state.thumb
    console.log("this.price", this.price);
  },
};
</script>

<style  scoped>
#Car {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

#Car .main {
  width: 100%;
  height: 100%;
  overflow: auto;
  background: skyblue;
}
</style>